<%= render 'title' %>
<div class="columns-12">
  <div class="col-2">
    <div class="nav nav-list">
      <li class="nav-header"><%= t("home_nav.notice") %></li>
      <li><%= link_to t("home_nav.ranking"), rank_path %></li>
      <li class="nav-header"><%= t("home_nav.contest") %></li>
      <li><a href="#">MUCTF</a></li>
    </div>
    </br>
    <%= form_for @qna, url: {action: 'new_q'}, :remote => 'true' do |f| %>
        <%= f.text_area :question, :placeholder => t("QA.placeholder"), :rows => '3', :id => 'ask_question', :onkeyup => "words_deal();" %>
        <%= f.submit t("QA.submit"), :class => "btn btn-small btn-success", :id => 'ask' %>
    <% end %>
  </div>
  <div class="col-8 col-offset-1">
    <table width="100%" class="table table-striped table-condensed" style="margin-left: -40px">
      <tr>
        <th><%= t("bulletin_board.date") %></th>
        <th><%= t("bulletin_board.messages") %></th>
      </tr>
      <% if @all_news.each do |news| %>
          <tr>
            <td><%= news.date %></td>
            <td><%= news.messages %></td>
          </tr>
      <% end.empty? %>
      <% end %>
    </table>
  </div>
</div>
<script>
  function words_deal() {
    var curLength = $("#ask_question").val().length;
    if (curLength > 50) {
      var num = $("#ask_question").val().substr(0, 50);
      $("#ask_question").val(num);
      sweetAlert("Oops...", '<%= t("QA.words_deal") %>', "error");
    } else {
      $("#textCount").text(50 - $("#ask_question").val().length);
    }
  }
  $('#new_qna').submit(function() {
    var curLength = $("#ask_question").val().length;
    if (curLength == 0) {
      sweetAlert("Oops...", '<%= t("QA.empty_warning") %>', "error");
      return false;
    } else {
      return true;
    }
  });
</script>
